<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>歌曲列表</title>
    <!-- 引入通用 CSS -->
    <link rel="stylesheet" href="/css/common.css">
    <style>
        input[type="text"] {
            padding: 8px;
            border: 1px solid #ccc;
            border-radius: 4px;
        }
        button {
            padding: 8px 16px;
            background-color: #007BFF;
            color: white;
            border: none;
            border-radius: 4px;
            cursor: pointer;
        }
        button:hover {
            background-color: #0056b3;
        }
    </style>
</head>
<body class="p-4">
<!-- 页面标题 -->
<h1 class="text-2xl font-bold mb-2">歌曲列表</h1>
<!-- 搜索歌曲名输入框 -->
<input type="text" id="songNameInput" placeholder="搜索歌曲名称" class="mb-4">
<!-- 搜索歌手姓名输入框 -->
<input type="text" id="singerNameInput" placeholder="搜索歌手姓名" class="mb-4">
<!-- 搜索按钮，点击触发搜索函数 -->
<button onclick="searchSongs()" class="ml-2">搜索</button>
<!-- 歌曲列表表格 -->
<table class="w-full border-collapse border border-gray-300">
    <thead>
    <tr>
        <th class="border border-gray-300 p-2">歌曲名称</th>
        <th class="border border-gray-300 p-2">歌手姓名</th>
        <th class="border border-gray-300 p-2">文件路径</th>
    </tr>
    </thead>
    <tbody id="songTableBody">
    <!-- 遍历歌曲列表，动态生成表格行 -->
    <tr th:each="song : ${songs}">
        <td th:text="${song.songname}" class="border border-gray-300 p-2"></td>
        <td th:text="${song.singername}" class="border border-gray-300 p-2"></td>
        <td th:text="${song.musicData}" class="border border-gray-300 p-2"></td>
    </tr>
    </tbody>
</table>
<script>
    function searchSongs() {
        // 获取搜索歌曲名输入框的值，并转换为大写
        const songNameFilter = document.getElementById('songNameInput').value.toUpperCase();
        // 获取搜索歌手姓名输入框的值，并转换为大写
        const singerNameFilter = document.getElementById('singerNameInput').value.toUpperCase();
        // 获取歌曲列表表格主体
        const table = document.getElementById('songTableBody');
        // 获取表格中的所有行
        const rows = table.getElementsByTagName('tr');

        for (let i = 0; i < rows.length; i++) {
            // 获取当前行的歌曲名称单元格内容
            const songName = rows[i].getElementsByTagName('td')[0].textContent || rows[i].getElementsByTagName('td')[0].innerText;
            // 获取当前行的歌手姓名单元格内容
            const singerName = rows[i].getElementsByTagName('td')[1].textContent || rows[i].getElementsByTagName('td')[1].innerText;

            // 判断歌曲名称和歌手姓名是否满足搜索条件
            const songNameMatch = songNameFilter === '' || songName.toUpperCase().indexOf(songNameFilter) > -1;
            const singerNameMatch = singerNameFilter === '' || singerName.toUpperCase().indexOf(singerNameFilter) > -1;

            if (songNameMatch && singerNameMatch) {
                // 如果都满足，显示该行
                rows[i].style.display = '';
            } else {
                // 如果不满足，隐藏该行
                rows[i].style.display = 'none';
            }
        }
    }
</script>
</body>
</html>